<template>
  <view class="addMoviegoer pl-2 pr-2 pt-3">
    <view class="rounded bg-orange-200 p-2 flex items-start">
      <text class="material-icons text-orange-500 text-xs">info</text>
      <view class="flex-1 text-orange-500 text-xs ml-2">
        项目若有实名制购票或者实名制入场要求，以详情页公式为准，特别提示，实名制入场项目要求本人持购票时填写的有效证件入场
      </view>
    </view>
    <view class="rounded-xl border border-gray-100 p-3 mt-4">
      <u-form ref="uForm" :model="formData" :rules="rules" label-width="80" labelPosition="left">
        <u-form-item borderBottom label="姓名" prop="vieuserName">
          <u-input v-model="formData.vieuserName" border="none" placeholder="请填写观演人姓名" />
        </u-form-item>
        <u-form-item borderBottom label="证件类型" prop="certificateName" @click="showCertificateType = true">
          <u-input
            v-model="formData.certificateName"
            border="none"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择证件类型"
          />
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-form-item>
        <u-form-item borderBottom label="证件号码" prop="vieuserIdentity">
          <u-input v-model="formData.vieuserIdentity" border="none" placeholder="请填写证件号码" />
        </u-form-item>
        <u-form-item borderBottom label="手机号" prop="vieuserPhone">
          <u-input v-model="formData.vieuserPhone" border="none" placeholder="请填写手机号" />
        </u-form-item>
      </u-form>
      <!--注释-->
      <view class="pay-desk">
        <u-button :custom-style="{ width: '100%' }" shape="circle" type="primary" @click="submit">确认</u-button>
      </view>
    </view>

    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u-action-sheet
      :actions="CERTIFICATE_TYPE"
      :show="showCertificateType"
      title="请选择证件"
      @close="showCertificateType = false"
      @select="sexSelect"
    />
  </view>
</template>

<script lang="ts" setup>
import { CERTIFICATE_TYPE } from '@/constants/base';
import { ACTIVITIES } from '@/api/activities';
import { RequestInterface } from '@/typings/request';
import { inject } from 'vue';
import { useActivtiesStore } from '@/stores/activties';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const { user } = storeToRefs(userStore);
const $http: RequestInterface = inject('$http') as RequestInterface;
const { proxy } = getCurrentInstance();
const activtiesStore = useActivtiesStore();
const formData = ref({
  // actVieuserName: '',
  // certificateType: '',
  // certificateName: '',
  // actVieuserIdentity: ''
});

const showCertificateType = ref(false);

const rules = ref({
  vieuserName: {
    type: 'string',
    required: true,
    message: '请填写姓名',
    trigger: ['blur', 'change']
  },
  certificateName: {
    type: 'string',
    required: true,
    message: '请选择证件类型',
    trigger: ['blur', 'change']
  },
  vieuserIdentity: [
    {
      required: true,
      message: '请输入证件号码',
      trigger: ['change', 'blur']
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value) => {
        return uni.$u.test.idCard(value);
      },
      message: '证件号码不正确',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur']
    }
  ],
  vieuserPhone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: ['change', 'blur']
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value) => {
        return uni.$u.test.mobile(value);
      },
      message: '手机号不正确',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur']
    }
  ]
});

const sexSelect = (params) => {
  formData.value.vieuserIdentityType = params.status;
  formData.value.certificateName = params.name;
};

const submit = () => {
  proxy.$refs.uForm
    .validate()
    .then(() => {
      const data = [
        {
          orderNo: activtiesStore.orderNo,
          ...activtiesStore.activityModify,
          ...formData.value,
          actPersonName: user.value.userNickname,
          actPersonPhone: user.value.userPhone || 17364268576,
          actDeliveryType: activtiesStore.activityDetails.activityServeBo.buyTicketType
        }
      ];
      $http.post({
        url: ACTIVITIES.SAVE_USER_ACTIVITY_PERSON_INFO,
        data: JSON.stringify(data),
        success: () => {
          activtiesStore.setActivityModify({ moviegoerList: data });
          // 返回上一个页面
          uni.navigateBack({
            delta: 1
          });
        }
      });
    })
    .catch(() => {
      uni.$u.toast('校验失败');
    });
};
</script>

<style lang="scss" scoped>
.pay-desk {
  @apply h-20 font-bold flex items-center justify-between p-5 fixed bottom-0 left-0 w-full;
}
</style>
